<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>文件上传界面</title>
</head>
<body>
<form id="upload_form" class="form-horizontal" style="padding: 8px" role="form" onsubmit="return false;"
      enctype="multipart/form-data">
    <!--    <input id="v-code" name="code" type="hidden">-->
    <div class="form-group" title="用户访问密钥">
        <div class="col-md-2 form-group">
            <label class="control-label" for="key"><label style="color: red">*</label>访问秘钥：</label>
        </div>
        <div class="col-lg-7 form-group">
            <input class="form-control" type="password" id="key" name="key" placeholder="请输入访问秘钥" required autofocus
                   autocomplete>
        </div>
        <div class="col-lg-3 checkbox" style="float: right">
            <input type="checkbox" id="remember"><label>记住秘钥</label>
        </div>
    </div>
    <div class="form-group" th:title="'选择'+${maxFileSize}+'以内的文件'">
        <label class="control-label" for="file"><label style="color: red">*</label>选择文件([[${maxFileSize}]]以内)：<span
                id="fileSize"></span></label>
        <input type="file" id="file" name="file" required>
    </div>
    <div class="form-group" th:title="'选择文件后可以修改保存的文件名称，文件名控制在'+${maxFileName}+'个字符内，非法字符/\:*?|<>'">
        <label class="control-label" for="fileName">文件名称：</label>
        <input class="form-control" type="text" id="fileName" name="fileName" placeholder="请输入文件名称（选填）例：壁纸123"
               th:oninput="'titleInput(\'fileName\',\'fileName_tips\','+${maxFileName}+')'"
               onchange="value=value.replace(/[/\\:*?|<>]/g,'')"
        >

        <p class="help-block" id="fileName_tips"></p>
    </div>
    <div class="form-group" th:title="'输入文件保存的目录，默认根据文件类型进行保存，路径名控制在'+${maxFilePath}+'个字符内，非法字符/\$'">
        <label class="control-label" for="path">保存路径：</label>
        <input class="form-control" type="text" list="upload_path_list" id="path" name="path" placeholder="请输入保存路径（选填）例：image"
               th:oninput="'titleInput(\'path\',\'filePath_tips\','+${maxFilePath}+')'"
               onchange="value=value.replace(/[/\\$]/g,'')"
        >
        <datalist id="upload_path_list">

        </datalist>
        <p class="help-block" id="filePath_tips"></p>
    </div>
    <div>
        <img id="wait_icon" src="" onerror="loadImg(this)" lsrc="static/img/%E5%BE%AA%E7%8E%AF.gif" style="zoom:0.2;"
             hidden="hidden">
        <input type="submit" id="btn_upload" class="btn btn-search" onclick="sub1()" value="上传">
        <input type="button" class="btn btn-default" value="重置" onclick="upload_reset()">
    </div>

    <script th:inline="javascript">
        eval(loadJs("static/js/myUpload.js"));

        $("#file").change(function () {
            var f = document.getElementById("file").files;
            var name = f[0].name;
            var size = f[0].size;
            var type = f[0].type;
            let maxSize=[[${maxFileSize}]];
            let maxName=[[${maxFileName}]];
            var fName = name.substring(0, name.lastIndexOf(".")).length > maxName ? name.substring(0, maxName) : name.substring(0, name.lastIndexOf("."));
            $("#fileName").val(fName);
            $("#fileSize").text(getFileSizeFormat(size));
            // $("#path").val(size);
            if ((size / 1048576) >= Number(maxSize.replace('MB',''))) {
                alert("警告：文件大小超过"+maxSize+"最大限制！");
                $("#file").val(null);
                $("#fileName").val(null);
                $("#fileSize").text('');
                // $("#fileSize").attr("style", "color:red");
                // $("#path").val(null);
            } else {
                $("#fileSize").attr("style", "color:green");
            }
            titleInput('fileName','fileName_tips',maxName);
        });
        
    </script>
</form>
</body>
</html>